<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('系统任务管理')"></head>
    <link rel="stylesheet" th:href="@{/static/plugin/beone/main.css}"/>
</head>
<body>
<div class="lenos-search">
    <div class="select">
        任务名称：
        <div class="layui-inline">
            <input class="layui-input" height="20px" id="jobName" autocomplete="off"/>
        </div>
        描述：
        <div class="layui-inline">
            <input class="layui-input" height="20px" id="remark" autocomplete="off"/>
        </div>
        <button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
        </button>
        <button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
                data-type="reload">
            <i class="layui-icon">&#xe669;</i>
        </button>
    </div>
</div>
<div class="layui-col-md12" style="height:40px;margin-top:3px;">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-normal" data-type="add">
            <i class="layui-icon">&#xe608;</i>新增
        </button>
        <button class="layui-btn layui-btn-normal" data-type="update">
            <i class="layui-icon">&#xe642;</i>编辑
        </button>
        <button class="layui-btn layui-btn-normal" data-type="detail">
            <i class="layui-icon">&#xe605;</i>查看
        </button>
    </div>
</div>
<table id="jobList" class="layui-hide" lay-filter="job"></table>
<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>
    {{#  if(d.status == 0){ }}
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="start">启动</a>
    {{#  } }}
    {{# if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="end">停止</a>
    {{#  } }}
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="run">手动执行</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var listUrl =  /*[[@{/system/job/list}]]*/ "/system/job/list";
        //方法级渲染
        table.render({
            id: 'jobList', elem: '#jobList' , url: listUrl,method:'POST'
            , cols: [[
                    {checkbox: true, fixed: true, width: '3%'}
                , {field: 'jobName', title: '任务名称', width: '12%', sort: true}
                , {field: 'cron', title: '表达式', width: '8%'}
                , {field: 'clazzPath', title: '任务类', width: '20%', sort: true}
                , {field: 'status', title: '状态', width: '5%', sort: true, templet:function(d){
                    return d.status == 1 ? "启动" : "停止";
                }}
                , {field: 'jobDesc', title: '任务描述', width: '10%'}
                , {field: 'createDate', title: '创建时间', width: '8%'}
                , {field: 'updateDate', title: '更新时间', width: '8%'}
                , {field: 'remark', title: '操作', width: '22%', toolbar: "#toolBar"}
            ]]
            , page: true ,request:{pageName:'page',limitName:'rows'}, height: 'full-83'
        });

        var $ = layui.$, active = {
            select: function () {
                var jobName = $('#jobName').val();
                var remark = $('#remark').val();
                table.reload('jobList', {
                    where: { jobName: jobName, remark: remark}
                });
            },
            reload: function () {
                $('#jobName').val('');
                $('#remark').val('');
                table.reload('jobList', {
                    where: { jobName: null, remark: null}
                });
            },
            add: function () {
                var url =  /*[[@{/system/job/showAdd}]]*/ "/system/job/showAdd";
                layuiUtils.dialog('addJob','添加任务', url, 700, 450);
            },
            update: function () {
                var checkStatus = table.checkStatus('jobList')
                        , data = checkStatus.data;
                if (data.length != 1) {
                    layer.msg('请选择一行编辑', {icon: 5});
                    return false;
                }
                if (data[0].status) {
                    layer.msg('已经启动任务无法更新,请停止后更新', {icon: 5, offset: 'rb', area: ['200px', '100px'], anim: 2});
                    return false;
                }
                showUpdate(data[0].id, true);
            },
            detail: function () {
                var checkStatus = table.checkStatus('jobList')
                        , data = checkStatus.data;
                if (data.length != 1) {
                    layer.msg('请选择一行查看', {icon: 5});
                    return false;
                }
                showUpdate(data[0].id, false);
            }
        };

        //监听工具条
        table.on('tool(job)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                showUpdate(data.id, false);
            } else if (obj.event === 'del') {
                if (data.status == 0) {
                    var index = layuiUtils.confirm('确定删除任务[<label style="color: #00AA91;">' + data.jobName + '</label>]?',function () {
                        var url = /*[[@{/system/job/delete/}]]*/ "/system/job/delete/";
                        url += data.id;
                        layuiUtils.doRequest(url, {}, function () {
                            layer.close(index);
                            table.reload('jobList');
                        });
                    })
                } else {
                    layer.msg('已经启动任务无法更新,请停止后删除', {icon: 5, offset: 'rb', area: ['200px', '100px'], anim: 2});
                }
            } else if (obj.event === 'edit') {
            if (data.status == 0) {
                showUpdate(data.id, true);
            } else {
                layer.msg('已经启动任务无法更新,请停止后更新', {icon: 5, offset: 'rb', area: ['200px', '100px'], anim: 2});
            }
        } else if (obj.event === 'start') {
                var index = layuiUtils.confirm('确定开启任务[<label style="color: #00AA91;">' + data.jobName + '</label>]?',function () {
                var url = /*[[@{/system/job/startJob/}]]*/ "/system/job/startJob/";
                url += data.id;
                layuiUtils.doRequest(url, {}, function () {
                    layer.close(index);
                    table.reload('jobList');
                });
            })
        } else if (obj.event === 'end') {
                var index = layuiUtils.confirm('确定停止任务[<label style="color: #00AA91;">' + data.jobName + '</label>]?',function () {
                var url = /*[[@{/system/job/endJob/}]]*/ "/system/job/endJob/";
                url += data.id;
                layuiUtils.doRequest(url, {}, function () {
                    layer.close(index);
                    table.reload('jobList');
                });
            })
        }else if (obj.event === 'run') {
                var index = layuiUtils.confirm('确定手动执行任务[<label style="color: #00AA91;">' + data.jobName + '</label>]?',function () {
                    var url = /*[[@{/system/job/runJob/}]]*/ "/system/job/runJob/";
                    url += data.id;
                    layuiUtils.doRequest(url, {});
                    layer.close(index);
                })
            }
        });

        $('.layui-col-md12 .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.select .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    function showUpdate(id, flag) {
        var url =  /*[[@{/system/job/showUpdate/}]]*/ "/system/job/showUpdate/";
        url += id + (flag ? "" : "?detail=true");
        layuiUtils.dialog('jobInfo', (flag ? '编辑Job' : "查看Job详情"), url, 700, 450);
    }
</script>
</body>
</html>